<!-- 以后项目的根组件 -->
<template>
<div>
	<!-- 1.0 利用mint-ui的header组件创建头部 -->
	<mt-header fixed title="header"></mt-header>

	<!-- 2.0 利用vue-router的router-view 占位 -->
	<router-view></router-view>

	<!-- 利用mui的tabbar组件实现系统的底部 -->
	<nav class="mui-bar mui-bar-tab">
		<router-link class="mui-tab-item" to="/home">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</router-link>
		<router-link class="mui-tab-item" to="/vip">
			<span class="mui-icon mui-icon-email">
			</span>
			<span class="mui-tab-label">会员</span>
		</router-link>
		<router-link class="mui-tab-item" to="/shopcar">
			<span class="mui-icon mui-icon-contact">
				<span class="mui-badge">0</span>
			</span>
			<span class="mui-tab-label">购物车</span>
		</router-link>
		<router-link class="mui-tab-item" to="/search">
			<span class="mui-icon mui-icon-search"></span>
			<span class="mui-tab-label">搜索</span>
		</router-link>
	</nav>
</div>
</template>

<script>
import { Toast } from 'mint-ui';

	// 负责导出 .vue 这个组件对象(本质上是一个Vue对象，所以Vue中该定义的元素都可以使用)
	export default {
		// el属性默认就是上面的template模版内容
		data(){  // es6语法，等价于 data: function(){}
			return {
				title: ''
			}
		},
		methods: {

		},
		created() {

		}
	}
</script>

<style scoped>
	/* 当前页面的css样式，其中scoped表示这个里面写的css代码只是在当前组件页面上有效，不会去影响到其他组件 */
	.red {
		color: red;
	}
</style>
